@charset "utf-8";
$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}



*{ box-sizing:content-box;
    margin: 0;
    padding: 0;
}
 @keyframes s1{
                0%{bottom: r(-310);opacity: 0.2;}
//              50%{bottom: r(-155);opacity: 0.7;}
                100%{bottom: 0;opacity: 1;}
                }
#bigbig{
     width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
    display: none;
    background: rgba(0,0,0,.3);
#share{
    width: 100%;
    height: r(716);
    position: absolute;
    bottom: 0;
    background: #FFFFFF;
    animation: s1 800ms ease-out alternate;
   
    ul {width: 100%; height: r(179);padding-top: r(20);}
         li{
        float:left;
        width: 33.3%;
        height: 100%;
        text-align: center;
        a{display: block;width: r(105);height: r(105);margin: 0 auto;}
        img{width: 100%; height: 100%;} 
        span{line-height: r(45); color: #999999;font-size:r(22);}
    }}
#share-close{
    height: r(100);
    width: 100%;
    margin-top:r(16) ;
    border-top:1px solid #F0EEEF ;}
    p{text-align: center;line-height: r(100);
    font-size: r(34);} } 

#web{
    position: relative;
    width: 100%;
    height: 100%;
}
header{
    position: absolute;
    top: 0;
    width: 100%;
    height: r(87);
    background: #f7f7f7;
    .my-head1{
        float: left;
        width: r(40);
        height: r(40);
        line-height: r(87);
        padding-left: r(29);
        
        img{
            width: 100%;
            height: 100%;
        }
    }
    .my-head2{
        float: right;
        width: r(44);
        height: r(46);
        padding-right: r(18);
        line-height: r(87);
        img{
            width:100%;
            height: 100%;
        }
    }
    .my-head3{
        margin: 0 auto;
        margin-left: r(282);
        line-height: r(87);
        p{
            font-size: r(35);
            color: #333333;
        }
    }
}
section{
    width: 100%;
    position: absolute;
    top: r(87);
    overflow-y: scroll;
    bottom: r(100);
    background: #f7f7f7;
    .my-banan{
        width: 100%;
        height: r(280);
        background: -webkit-linear-gradient(left top, #351c50,#9d3054);
    }
    .my-banan1{
        width: 100%;
        height: r(280);
        position: relative;
        .my-banan-user{
            float: left;
            width: r(130);
            height: r(130);
            margin: r(28) r(30) r(0) r(22);
            img{
                width: 100%;
                height:100%;
            }
        }
        .my-banban-user-font{
            padding-top: r(68);
            h1{
                font-size: r(35);
                color: white;
                font-weight: normal;
            }
            .my-banban-user-font1{
                float: right;
                font-size: r(24);
                color: white;
                padding-top: r(20);
                img{
                    
                    width: r(11);
                    height: r(19);
                    padding-right: r(20);
                }
            }
        }
        .my-banan-ul{
            width:100%;
            height: r(90);
            position: absolute;
            bottom: 0;
            li{
                width: 33%;
                height: r(90);
                float: left;
                list-style: none;
                margin-right: r(2);
                background:rgba(0,0,0,0.2);
                h1{
                    font-size: r(24);
                    color: white;
                    font-weight: normal;
                    text-align: center;
                    line-height: r(45);
                    position: relative;
                }
                p{
                    font-size: r(24);
                    color: white;
                    text-align: center;
                }
            }
            li:last-child{
                margin-right: r(0);
            }
            li:nth-child(2) h1:after{
                content: "";
                position: absolute;
                width: r(10);
                top: r(10);
                height: r(10);
                left: 57%;
                background: #cf0033;
                border-radius:100%;
            }
        }
    }
    .my-closing{
        width:100%;
        height: r(89);
        background: white;
        margin-top: r(32);
        border-bottom: 1px solid #e3e3e3;
        border-top: 1px solid #e3e3e3;
        .my-closing1{
            float: left;
            line-height: r(89);
            font-size: r(28);
            vertical-align: middle;
            img{
                padding-right: r(21);
                padding-left: r(20);
                width: r(45);
                height: r(45);
                vertical-align: middle;
            }
        }
        .my-closing2{
            float: right;
            line-height: r(89);
            font-size: r(24);
            color: #cccccc;
            vertical-align: middle;
            img{
                vertical-align: middle;
                width: r(16);
                height: r(28);
                padding-right: r(21);
                padding-left: r(22);
            }
        }
    }
    .my-section-ul{
        width: 100%;
        height: r(121);
        background: white;
        border-bottom: 1px solid #e3e3e3;
        li{
            width: r(75);
            height: r(121);
            float: left;
            list-style: none;
            color: #999999;
            font-size: r(24);
            text-align: center;
            margin-left: r(80);
            img{
                padding-top: r(12);
                width: r(53);
                height: r(44);
                padding-bottom: r(3);
            }
            li:nth-child(2) img{
                
                width: r(45);
                height: r(36);
            }
            li:nth-child(3) img{
                width: r(49);
                height: r(46);
            }
            li:nth-child(4) img{
                width: r(32);
                height: r(37);
            }
        }
        li:first-child{
            margin-left: r(40);
        }
    }
    .my-much{
        width: 100%;
        height: r(90);
        background: white;
        border-bottom: 1px solid #e3e3e3;
        border-top: 1px solid #e3e3e3;
        .my-much1{
            font-size: r(28);
            color: #333333;
            vertical-align: middle;
            line-height: r(90);
            float: left;
            img{
                padding-left: r(20);
                padding-right: r(21);
                width: r(45);
                height: r(45);
                vertical-align: middle;
            }
        }
        .my-much2{
            width: r(16);
            height: r(28);
            float: right;
            vertical-align: middle;
            line-height: r(90);
             padding-right: r(21);
            img{
                vertical-align: middle;
                width: 100%;
                height: 100%;
               
            }
        }
    }
    .css{
        margin-top: r(30);
    }
    .css1{
        border: none;
        border-bottom: 1px solid #e3e3e3;
    }
    .css2{
       margin: r(30) r(0);
    }
}
footer {
  width: 100%;
  height: r(99);
  position: absolute;
  bottom: 0;
    background: #FFFFFF;
border-top: 1px solid #DFDFDD; 
  ul li {
    width: 25%;
    height: 100%;
    float: left;
    margin-top: r(14);
    text-align: center; 
    i.iconfont {
      font-size: r(45);
      -webkit-text-stroke: 1px #DFDFDF;
      color: transparent; }}
    li.active .iconfont {
      color: #d62d31;  -webkit-text-stroke:0;}
    li:hover .iconfont {
      color: #d62d31; -webkit-text-stroke: 0; }
    p {
      font-size: r(20); }
    a {
      color: #333333; }
      
      }